<template>
	<div class="card flex_col login-root">
		<label class="flex_center login-title">浙江嘉丰机电有限公司年假管理系统</label>
		<div class="flex_end_self mt10">
			<label>用户名:</label>
			<el-input clearable v-model="ctx.account" style="width: 200px" />
		</div>
		<div class="flex_end_self mt5">
			<label>密码:</label>
			<el-input clearable type="password" v-model="ctx.pwd" style="width:200px" />
		</div>
		<el-button @click="onClickLogin" type="primary" class="mt10">登陆</el-button>
	</div>
</template>

<script setup lang="ts">

import { runAction2 } from '@/utils/ui';
import { reactive } from 'vue';
import { service } from '@/service/api';
import router from '@/router';
import { userInfo } from '@/service/global';

interface Ctx {
	account: string,
	pwd: string
}

const ctx = reactive<Ctx>({
	account: '',
	pwd: ''
});

async function onClickLogin() {
	runAction2('登陆', '正在登陆', async () => {
		if (ctx.account.length == 0) {
			throw '请输入账号';
		}
		if (ctx.pwd.length == 0) {
			throw '请输入密码';
		}
		const info = await service.login(ctx);
		userInfo.value = info;
		router.push('/home');
	});
}

</script>

<style scoped >
.login-root {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 30px;
}

.login-title {
	font-size: large;
}
</style>
